<template>
  <div>
    <icon-nav
      :title="title"
      :label="extend.series.label"
      :isCharts="isCharts"
      @changeCharts="isCharts = isCharts?false:true"
      @clickSetting="$refs.setting.show()"
      :chartsType="index"
      @changeType="index = index === '0'?'1':'0'"
    ></icon-nav>
    <div v-if="isCharts">
      <ve-line
        v-if="index === '0'"
        :data="chartData"
        :settings="chartSettings"
        :height="height"
        :width="width"
        :data-zoom="dataZoom"
        :extend="extend"
      ></ve-line>
      <ve-histogram
        v-else
        :data="chartData"
        :settings="chartSettings"
        :height="height"
        :width="width"
        :data-zoom="dataZoom"
        :extend="extend"
      ></ve-histogram>
    </div>
    <v-table v-else :chartData="chartData" :chartSettings="chartSettings"></v-table>
    <setting
      :title="'图表-'+title"
      ref="setting"
      :chartData="chartData"
      :chartSettings="chartSettings"
    ></setting>
  </div>
</template>
<script>
import setting from "./setting";
import VeLine from "v-charts/lib/line.common";
import veHistogram from "v-charts/lib/histogram.common";
import amap from "v-charts/lib/amap.common";
import vTable from "./table";
import iconNav from "./iconNav";

export default {
  components: {
    setting,
    VeLine,
    vTable,
    iconNav,
    veHistogram
  },
  props: {
    title: {
      type: String,
      default: "6环比曲线"
    },
    dataList: {
      type: Array
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    }
  },
  data() {
    return {
      index:'0',
      isCharts: true,
      extend: {
        series: {
          label: {
            show: false,
            position: "top"
          }
        }
      },
      chartSettings: {
        yAxisName: ["%"],
        scale: true,
        labelMap: {
          week: "日期",
          siteSalesVolumeLP: "站点销量环比(%)",
          totalSalesVolumeLP: "总销售环比(%)",
          siteSalesLP: "站点销售额环比(%)",
          totalSalesLP: "总销售额环比(%)",
          siteMarketingLP: "站点营销费用环比(%)",
          totalMarketingLP: "总营销费用环比(%)",
          siteProfitRateLP: "站点净利率环比(%)",
          totalProfitRateLP: "总净利率环比"
        }
      },
      chartData: {
        columns: [
          "week",
          "siteSalesVolumeLP",
          "siteSalesLP",
          "siteMarketingLP",
          "siteProfitRateLP"
        ],
        rows: []
      },
      dataZoom: {
        type: "slider",
        show: true,
        startValue: 10, //数据窗口范围的起始数值
        endValue: 0,
        height: 10,
        bottom: 40
      }
    };
  },
  watch: {
    dataList: {
      handler(newValue, oldValue) {
        let rows = newValue;
        this.chartData.rows = rows;
      },
      deep: true
    }
  }
};
</script>
